<template>
  <div class="container">
    <el-row :gutter="4">
      <el-col :span="6">
        <el-select :class="{ error: !validateResult }" filterable size="mini" v-model="form.field" placeholder="请选择字段" style="width: 100%" @change="handleFieldChange">
          <el-option-group v-for="group in dataList" :key="group.id" :label="group.title">
            <el-option v-for="item in group.children" :key="item.id" :label="item.title" :value="item.id"> </el-option>
          </el-option-group>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select :class="{ error: !validateResult }" v-if="currentItem.optionType > 0" size="mini" v-model="form.option" placeholder="请选择规则" style="width: 100%" @change="handleOptionChange">
          <el-option v-for="item in condition['condition' + currentItem.optionType]" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-select :class="{ error: !validateResult }" v-else disabled size="mini" v-model="form.option" placeholder="请选择规则" style="width: 100%"> </el-select>
      </el-col>
      <el-col :span="10">
        <!-- input -->
        <el-input :type="currentItem.inputType" :class="{ error: !validateResult }" v-if="currentItem.valueType === 'input'" size="mini" v-model="form.value" @change="handleChange"></el-input>
        <!-- select -->
        <el-select :class="{ error: !validateResult }" v-else-if="currentItem.valueType === 'select'" size="mini" v-model="form.value" placeholder="请选择" style="width: 100%" @change="handleChange">
          <template v-if="currentItem.valueOptionGroup">
            <el-option-group v-for="group in currentItem.valueOption" :key="group.id" :label="group.title">
              <el-option v-for="item in group.children" :key="item.id" :label="item.title" :value="item.id"> </el-option>
            </el-option-group>
          </template>
          <template v-else>
            <el-option v-for="item in currentItem.valueOption" :key="item.id" :label="item.title" :value="item.id"> </el-option>
          </template>
        </el-select>
        <!--date-->
        <el-date-picker :class="{ error: !validateResult }" v-else-if="currentItem.valueType === 'date'" size="mini" v-model="form.value" type="date" value-format="yyyy-MM-dd" style="width: 100%" @change="handleChange"></el-date-picker>
        <!--month-->
        <el-date-picker :class="{ error: !validateResult }" v-else-if="currentItem.valueType === 'month'" size="mini" v-model="form.value" type="month" value-format="yyyy-MM" style="width: 100%" @change="handleChange"></el-date-picker>
        <!-- area -->
        <!-- <el-cascader :class="{ error: !validateResult }" v-else-if="currentItem.valueType === 'area'" size="mini" v-model="form.value" clearable :options="areaOption" collapse-tags :props="areaProps" style="width: 100%" @change="handleChange"></el-cascader> -->
        <!-- area只选省改单选，提交文字 -->
        <el-select :class="{ error: !validateResult }" v-else-if="currentItem.valueType === 'area'" size="mini" v-model="form.value" placeholder="请选择" style="width: 100%" @change="handleChange">
          <el-option v-for="item in areaOption" :key="item.name" :label="item.name" :value="item.name"> </el-option>
        </el-select>
        <!-- time 动态时间-->
        <div v-else-if="currentItem.valueType === 'time' && form.option === 90">过去<el-input :class="{ error: !validateResult }" size="mini" type="number" v-model="form.value" style="width: 100px; margin: 0 10px" @change="handleChange('time')"></el-input>天内</div>
        <!-- time 固定时间-->
        <el-date-picker
          :class="{ error: !validateResult }"
          v-else-if="currentItem.valueType === 'time' && form.option === 100"
          v-model="form.value"
          size="mini"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 100%"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleChange"
        ></el-date-picker>
        <!-- none -->
        <el-input :class="{ error: !validateResult }" v-else disabled size="mini" v-model="form.value"></el-input>
      </el-col>
      <el-col :span="2" class="icon-box">
        <i class="el-icon el-icon-circle-plus" @click="handleAdd"></i>
        <i class="el-icon el-icon-remove" @click="handleRemove"></i>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'OptionFormItem',
  props: {
    value: {
      type: Object,
      default: () => {
        return {
          field: '',
          option: '',
          value: '',
        }
      },
    },
    baseSelect: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      form: {
        field: '',
        option: '',
        value: '',
      },
      optionList: [],
      dataList: [],
      condition: [],
      currentItem: {},
      areaOption: [],
      areaProps: { value: 'code', label: 'name', checkStrictly: true },
      validateResult: true,
      inputNumberList: ['年龄', '呼叫次数', '接通率', '未接通次数', '接通次数', '到账金额', '有效签单次数', '价值', '登录/启动次数', '搜索次数', '浏览量', '查看联系方式量', '收藏量', '锁定量'],
    }
  },
  computed: {},
  mounted() {
    this.init()
  },
  destroyed() {},
  methods: {
    init() {
      this.dataList = this.baseSelect.dataList
      this.condition = this.baseSelect.condition
      this.$store.dispatch('select/getCityList').then((res) => {
        this.areaOption = res.map((item) => {
          return {
            name: item.name,
            code: item.code,
          }
        })
      })
      this.form.field = this.value.field
      this.handleFieldChange(this.form.field, 'init')
      this.$nextTick(() => {
        this.form.option = this.value.option
        this.form.value = this.value.value
        this.handleChange()
      })
    },
    handleAdd() {
      this.$emit('add')
    },
    handleRemove() {
      this.$emit('remove')
    },
    handleFieldChange(val, type) {
      const id = Math.floor(val / 100)
      const item = this.dataList.find((item) => item.id === id)
      if (item) {
        const subItem = item.children.find((sub) => sub.id === val)
        if (subItem) {
          this.currentItem = subItem
          this.currentItem.valueOptionGroup = false
          this.currentItem.inputType = 'text'
          this.inputNumberList.forEach((item) => {
            if (this.currentItem.title.includes(item)) {
              this.currentItem.inputType = 'number'
            }
          })
          if (this.currentItem.valueOption) {
            this.currentItem.valueOption.forEach((item) => {
              if (item.children) {
                this.currentItem.valueOptionGroup = true
              }
            })
          }
          this.form.option = this.form.value = ''
        }
      }
      if (type != 'init') {
        this.handleChange()
      }
    },
    handleOptionChange() {
      if (this.currentItem.optionType === 2) {
        this.form.value = ''
      }
      this.handleChange()
    },
    handleChange(type) {
      if (type === 'time') {
        if (this.form.value > 365) {
          this.$message({
            message: '动态时间不能大于365天',
            type: 'warning',
          })
          this.form.value = 365
        }
        if (this.form.value < 0) {
          this.$message({
            message: '动态时间不能小于0天',
            type: 'warning',
          })
          this.form.value = 0
        }
      }
      this.validateResult = true
      this.$emit('input', this.form)
    },
    validate() {
      this.validateResult = true
      if (!this.form.field || !this.form.option) {
        this.validateResult = false
      }
      if (!this.form.value && this.form.value !== 0) {
        this.validateResult = false
      }
      return this.validateResult
    },
  },
}
</script>

<style scoped lang="scss">
.el-icon {
  font-size: 18px;
  color: #a5a4a4;
  line-height: 28px;
  margin-left: 6px;
  cursor: pointer;
  &:hover {
    color: #5db42c;
  }
}
.el-icon-remove {
  &:hover {
    color: #f56c6c;
  }
}
::v-deep .error.el-input__inner {
  border-color: #f56c6c !important;
}
::v-deep .error .el-input__inner {
  border-color: #f56c6c !important;
}
</style>
